<template>
  <div class="box">
    <div class="f1">
      <div class="f1_content">
        <div class="goHome" @click="goHome">
          <img src="@/assets/flow/首页.png" alt="" />返回主页
        </div>
        <ul>
          <li v-for="(item, index) in list" :key="item.num">
            <h6>
              <span>{{ item.num }} </span>{{ item.str }}
            </h6>
            <template
              v-if="item.num == '01' || item.num == '02' || item.num == '03'"
            >
              <img class="quan" src="@/assets/home/组75.png" alt="" />
              <img class="line" src="@/assets/home/组73.png" alt="" />
            </template>
            <template v-else>
              <template v-if="item.num == '04'">
                <img class="quan" src="@/assets/home/组71.png" alt="" />
                <img class="line" src="@/assets/home/组72.png" alt="" />
              </template>
              <template v-else>
                <img class="quan" src="@/assets/home/组71-2.png" alt="" />
                <img
                  class="line"
                  v-show="index !== list.length - 1"
                  src="@/assets/home/组74.png"
                  alt=""
                />
              </template>
            </template>
          </li>
        </ul>
      </div>
    </div>
    <div class="f2" v-loading="loading">
      <div class="content">
        <div class="hint" style="margin-bottom: 40px; height: 32px">
          <p v-show="type == 1 || type == 4">
            征信报告、守信红名单、海关信用认定均为选填，您可自行选择，资料上传越完整，综合认证等级越高
          </p>
          <p v-show="type == 2 || type == 3">
            征信报告、守信红名单均为选填，您可自行选择，资料上传越完整，综合认证等级越高
          </p>
        </div>
        <div class="title">
          <h6></h6>
          征信报告
        </div>
        <div class="f2_contents">
          <div>
            <span class="aaa11">银行征信报告</span>
            <el-upload
              multiple
              action="#"
              class="upload-demo"
              :auto-upload="false"
              :on-preview="handlePreviewYhzxbg"
              :on-remove="handleRemoveYhzxbg"
              :on-change="handleChangeBusinessYhzxbg"
              :http-request="uploadFileBusiness"
              :file-list="fileList"
              :limit="limit"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                <div slot="tip" class="el-upload__tip">
                  （1.文件大小不超过5M；2.支持pdf格式。）
                </div>
              </div>
            </el-upload>
          </div>
          <div
            id="datatable"
            v-if="typeList.length != 0"
            style="margin-top: 20px"
          >
            <el-table
              :data="typeList"
              border
              style="width: 800px"
              stripe
              :header-cell-style="{
                background: '#F1F5FF',
                color: '#4D4D4D',
              }"
            >
              <el-table-column label="序号" min-width="8%" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="oldfilename"
                label="文件名称"
                align="center"
                min-width="50%"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                min-width="20%"
              >
                <template slot-scope="scope">
                  <span class="span" @click="examine(scope.$index, typeList)"
                    >查看</span
                  >
                  <span class="span span1" @click="del(scope.$index, typeList)"
                    >删除</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="title">
          <h6></h6>
          守信红名单
          <div class="hint">
            <img
              style="margin-right: 5px"
              src="@/assets/flow/组261.png"
              alt=""
            />
            <p>守信红名单近三年信息有效</p>
          </div>
        </div>
        <div class="f2_content">
          <template v-if="promisesredStatus">
            <!-- 表单 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="180px"
              class="demo-ruleForm"
            >
              <el-form-item label="是否列入守信红名单" prop="promisesred">
                <el-radio-group
                  v-model="ruleForm.promisesred"
                  @input="cutPromisesred"
                >
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <div
              class="license license1"
              style=""
              v-if="ruleForm.promisesred == '是'"
            >
              <span class="aaa11"
                ><span style="color: #f25757">*</span>证明文件
              </span>
              <!-- 图片上传 -->
              <el-upload
                action="#"
                class="permit el-upload--picture-card"
                list-type="picture-card"
                :auto-upload="false"
                accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
                :on-change="handleChangeBusinessZjwj"
                :http-request="uploadFileBusiness"
                :file-list="zmwj"
                ref="pictureUpload1"
              >
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove1(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <div class="license-right1">
                <div>
                  <p>说明：</p>
                  <p>1.上传文件大小不超过5M；</p>
                  <p>2.仅支持jpeg、png、jpg格式文件；</p>
                  <p style="color: #f00">3.需加盖公章。</p>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <!-- 表单 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="180px"
              class="demo-ruleForm"
            >
              <el-form-item label="是否列入守信红名单" prop="promisesred">
                <el-radio-group
                  v-model="ruleForm.promisesred"
                  @input="cutPromisesred"
                >
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </template>
        </div>
        <template v-if="type == 1 || type == 4">
          <div class="title">
            <h6></h6>
            海关信用认定
          </div>
          <div class="f2_content">
            <template v-if="customsauthStatus">
              <!-- 表单 -->
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="180px"
                class="demo-ruleForm"
              >
                <el-form-item label="是否有海关信用认证" prop="customsauth">
                  <el-radio-group
                    v-model="ruleForm.customsauth"
                    @input="cutCustomsauth"
                  >
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="海关信用认定等级"
                  prop="customsauthgrade"
                  v-if="ruleForm.customsauth == '是'"
                >
                  <el-select
                    v-model="ruleForm.customsauthgrade"
                    placeholder="请选择海关信用认定等级"
                  >
                    <el-option
                      label="高级认证企业"
                      value="高级认证企业"
                    ></el-option>
                    <el-option
                      label="注册登记和备案企业"
                      value="注册登记和备案企业"
                    ></el-option>
                    <el-option label="失信企业" value="失信企业"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div
                class="license license1"
                style=""
                v-if="ruleForm.customsauth == '是'"
              >
                <span class="aaa11"
                  ><span style="color: #f25757">*</span>认定证书
                </span>
                <!-- 图片上传 -->
                <el-upload
                  action="#"
                  class="permit el-upload--picture-card"
                  list-type="picture-card"
                  :auto-upload="false"
                  accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
                  :on-change="handleChangeBusinessRdzs"
                  :http-request="uploadFileBusiness"
                  :file-list="rdzs"
                  ref="pictureUpload2"
                >
                  <div slot="file" slot-scope="{ file }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        class="el-upload-list__item-delete"
                        @click="handleRemove2(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <div class="license-right1">
                  <div>
                    <p>说明：</p>
                    <p>1.上传文件大小不超过5M；</p>
                    <p>2.仅支持jpeg、png、jpg格式文件；</p>
                    <p style="color: #f00">3.需加盖公章。</p>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <!-- 表单 -->
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="180px"
                class="demo-ruleForm"
              >
                <el-form-item label="是否有海关信用认证" prop="customsauth">
                  <el-radio-group
                    v-model="ruleForm.customsauth"
                    @input="cutCustomsauth"
                  >
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </template>
          </div>
        </template>

        <div class="btn">
          <button class="last" @click="lastStep">上一步</button>
          <button class="next" :disabled="isLock" @click="nextStep">
            下一步
          </button>
        </div>
      </div>
      <!-- 弹窗 -->
      <el-dialog :visible.sync="dialogVisible" v-viewer>
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { info, files, del } from "@/api/authentication/index.js";
import axios from "axios";
import Cookies from "js-cookie";
import { baseURL } from "@/utils/http";
export default {
  data() {
    return {
      filepath: [],
      loading: false,
      list: [
        {
          num: "01",
          str: "基本信息",
        },
        {
          num: "02",
          str: "资质信息",
        },
        {
          num: "03",
          str: "财务信息",
        },
        {
          num: "04",
          str: "信用信息",
        },
        {
          num: "05",
          str: "授权信息采集",
        },
        {
          num: "06",
          str: "预览并提交",
        },
      ],
      figure: 8,
      status: false,
      rzid: "",
      isLock: false,
      type: "",
      limit: 99,
      fileListBusiness: [], //证件文件
      zmwj: [],
      fileListBusiness1: [], //认定证书
      rdzs: [],
      typeList: [], //银行征信报告
      fileList: [], //银行征信报告
      dialogVisible: false,
      dialogImageUrl: "",
      promisesredStatus: true, // 是否列入守信红名单状态
      customsauthStatus: true, // 是否海关信息认证状态
      ruleForm: {
        promisesred: "", //是否列入守信红名单
        customsauth: "", //是否海关信息认证
        customsauthgrade: "", //海关信用等级
      },
      rules: {
        promisesred: [{ required: true, message: " ", trigger: "change" }],
        customsauth: [{ required: true, message: " ", trigger: "change" }],

        customsauthgrade: [
          {
            required: true,
            message: "海关信用认定等级",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    document.documentElement.scrollTop = 0;
    this.rzid = sessionStorage.getItem("rzid");
    this.type = localStorage.getItem("type");
    if (this.type == 2 || this.type == 3) {
      this.ruleForm.customsauth = "否";
    }
    this.getInfo();
    this.getFiles();
  },
  methods: {
    goHome() {
      this.$router.push("/");
    },
    // 图片转换
    upload(url, another, oldfilename) {
      let _this = this;
      axios({
        method: "get",
        url: url, // 替换为文件的URL
        responseType: "blob", // 设置响应类型为Blob
      })
        .then(async function (response) {
          if (response.status === 200) {
            const blobData = response.data; // 获取Blob数据
            // 现在你可以对Blob数据执行任何需要的操作，例如保存它或者展示它
            // console.log("成功获取Blob数据:", blobData);
            if (!another) {
              another = [];
            }
            let f = _this.blobToFile(blobData, oldfilename);
            let e = {
              name: oldfilename,
              percentage: 0,
              raw: f,
              size: blobData.size,
              status: "ready",
              uid: "",
              url: url,
            };
            another.push(e);
          } else {
            console.error("获取文件失败");
          }
        })
        .catch(function (error) {
          console.error("发生错误:", error);
        });
      return another;
    },
    blobToFile(blob, fileName, lastModified) {
      const options = {
        type: blob.type,
        lastModified: lastModified || Date.now(),
      };

      // 创建一个新的File对象
      try {
        return new File([blob], fileName, options);
      } catch (e) {
        // 在一些浏览器中，File构造函数可能不可用，因此我们可以使用Blob作为备选方案
        const blobWithFileProperties = new Blob([blob], options);
        blobWithFileProperties.name = fileName;
        return blobWithFileProperties;
      }
    },
    // 获取信息
    getInfo() {
      let rzid = this.rzid;
      if (rzid == "") return;
      info(rzid).then((res) => {
        if (res.msg == "操作成功") {
          if (!res.data) return;
          this.ruleForm = res.data;
          if (!res.data.promisesred) {
            this.ruleForm.promisesred = "是";
          }
          if (this.type == 2 || this.type == 3) {
            this.ruleForm.customsauth = "否";
            return;
          }
          if (!res.data.customsauth) {
            this.ruleForm.customsauth = "是";
          }
        }
      });
    },
    // 获取文件
    getFiles() {
      let rzid = this.rzid;
      if (rzid == "") return (this.status = true);
      files(rzid).then((res) => {
        if (res.msg == "操作成功") {
          let filepath = res.data;
          filepath.forEach((item) => {
            if (item.objecttype == "YHZXBG") {
              this.typeList.push(item);
            } else if (item.objecttype == "SXHMD") {
              let a = this.upload(item.filepath, this.zmwj, item.newfilename);
              this.fileListBusiness = a;
            } else if (item.objecttype == "HGXXRD") {
              let a = this.upload(item.filepath, this.rdzs, item.newfilename);
              this.fileListBusiness1 = a;
            }
          });
        }
      });
    },
    // 文件上传 征信报告
    uploadingFile(fileList, newfilename, name) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.typeList.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
                oldfilename: name,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    uploading(fileList, newfilename) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.filepath.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    // 删除
    delFile(file) {
      let index = "";
      for (let i = 0; i < this.filepath.length; i++) {
        if (
          this.filepath[i].filepath == file.url ||
          this.filepath[i].uid == file.uid
        ) {
          index = i;
          this.filepath.splice(index, 1);
          return;
        }
      }
    },
    // 切换是否列入守信红名单
    cutPromisesred(e) {
      e == "是"
        ? (this.promisesredStatus = true)
        : (this.promisesredStatus = false),
        (this.fileListBusiness = []);
    },
    // 切换是否有海关信息认证
    cutCustomsauth(e) {
      e == "是"
        ? (this.customsauthStatus = true)
        : (this.customsauthStatus = false),
        (this.fileListBusiness1 = []);
    },
    // 查看
    examine(index, data) {
      let val = data[index];
      let name = data[index].newfilename.split(".")[1];
      let imgUrlStr = val.filepath;
      if (name == "jpg" || name == "png") {
        const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
        a.setAttribute("target", "_blank");
        a.href = val.filepath;
        a.click();
      } else {
        fetch(imgUrlStr).then((res) =>
          res.blob().then((blob) => {
            const a = document.createElement("a"), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
              url = window.URL.createObjectURL(blob),
              filename = val.newfilename;
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
          })
        );
      }
    },
    // 删除
    delFileList(id, list, index) {
      del(id).then((res) => {
        if (res.msg == "操作成功") {
          list.splice(index, 1);
          if (list.length == 0) return (list = []);
        }
      });
    },
    //删除表格信息
    del(index, data) {
      this.delFileList(data[index].serialno, data, index);
    },
    lastStep() {
      this.$router.push("/flow3");
    },
    // 下一步
    nextStep() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 5000);
      let { promisesred, customsauth, customsauthgrade } = this.ruleForm;
      let rzid = this.rzid;
      let type = localStorage.getItem("type");
      // 调用接口
      let token = localStorage.getItem("token");
      let data = {
        promisesred: promisesred,
        customsauth: customsauth,
        customsauthgrade: customsauthgrade,
        id: rzid,
        red: [],
        identify: [],
        bankReports: [],
      };
      var patt1 = /[\u4e00-\u9fa5]+/g;
      let a = true;
      let b = true;
      this.filepath.forEach((item) => {
        if (item.newfilename.match(patt1).join("") == "证明文件" && a) {
          data.red.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
          a = false;
        } else if (item.newfilename.match(patt1).join("") == "认定证书" && b) {
          data.identify.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
          b = false;
        }
      });
      this.typeList.forEach((item) => {
        data.bankReports.push({
          serialno: item.serialno,
          filepath: item.filepath,
        });
      });
      if (promisesred == "是" && customsauth == "是") {
        if (
          customsauthgrade == "" ||
          customsauthgrade == "null" ||
          customsauthgrade == null
        )
          return this.$Message.error("请选择海关信用等级");
        if (
          this.fileListBusiness1.length == 0 ||
          this.fileListBusiness.length == 0
        )
          return this.$Message.error("请上传文件");
        let url = baseURL + `/credit/auth/four`;
        axios
          .post(url, data, {
            headers: { "Content-Type": "application/json", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "操作成功") {
              if (type == 1 || type == 4) {
                this.$router.push("/flow6");
              } else {
                this.$router.push("/flow7");
              }
              // this.$router.push("/flow5");

              return;
            }
            this.$Message.error("操作失败");
          });
      } else if (promisesred == "否" && customsauth == "否") {
        let url = baseURL + `/credit/auth/four`;
        axios
          .post(url, data, {
            headers: { "Content-Type": "application/json", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "操作成功") {
              // this.$router.push("/flow5");
              if (type == 1 || type == 4) {
                this.$router.push("/flow6");
              } else {
                this.$router.push("/flow7");
              }
              return;
            }
            this.$Message.error("操作失败");
          });
      } else if (promisesred == "否" && customsauth == "是") {
        if (
          customsauthgrade == "" ||
          customsauthgrade == "null" ||
          customsauthgrade == null
        )
          return this.$Message.error("请选择海关信用等级");
        if (this.fileListBusiness1.length == 0)
          return this.$Message.error("请上传文件");
        let data = {
          promisesred: promisesred,
          customsauth: customsauth,
          customsauthgrade: customsauthgrade,
          id: rzid,
          identify: [],
          bankReports: [],
        };
        var patt1 = /[\u4e00-\u9fa5]+/g;
        this.filepath.forEach((item) => {
          if (item.newfilename.match(patt1).join("") == "认定证书") {
            this.filepath.forEach((item) => {
              data.identify.push({
                serialno: item.serialno,
                filepath: item.filepath,
              });
            });
          }
        });
        this.typeList.forEach((item) => {
          data.bankReports.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        let url = baseURL + `/credit/auth/four`;
        axios
          .post(url, data, {
            headers: { "Content-Type": "application/json", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "操作成功") {
              // this.$router.push("/flow5");
              // this.$router.push("/flow7");
              if (type == 1 || type == 4) {
                this.$router.push("/flow6");
              } else {
                this.$router.push("/flow7");
              }
              return;
            }
            this.$Message.error("操作失败");
          });
      } else if (promisesred == "是" && customsauth == "否") {
        if (this.fileListBusiness.length == 0)
          return this.$Message.error("请上传文件");
        let data = {
          promisesred: promisesred,
          customsauth: customsauth,
          id: rzid,
          red: [],
          bankReports: [],
        };
        var patt1 = /[\u4e00-\u9fa5]+/g;
        this.filepath.forEach((item) => {
          if (item.newfilename.match(patt1).join("") == "证明文件") {
            this.filepath.forEach((item) => {
              data.red.push({
                serialno: item.serialno,
                filepath: item.filepath,
              });
            });
          }
        });
        this.typeList.forEach((item) => {
          data.bankReports.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        let url = baseURL + `/credit/auth/four`;

        axios
          .post(url, data, {
            headers: { "Content-Type": "application/json", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "操作成功") {
              // this.$router.push("/flow5");
              // this.$router.push("/flow7");
              if (type == 1 || type == 4) {
                this.$router.push("/flow6");
              } else {
                this.$router.push("/flow7");
              }
              return;
            }
            this.$Message.error("操作失败");
          });
      }
    },
    // 银行征信报告
    handleRemoveYhzxbg(file, fileList) {
      this.fileList = fileList;
    },
    handlePreviewYhzxbg(file) {},
    handleChangeBusinessYhzxbg(file, fileList) {
      this.fileList.push(file);
      let a = [];
      a.push(file);
      this.uploadingFile(a, "银行征信报告", file.name);
    },
    // 证件文件
    //自定义上传文件
    uploadFileBusiness(file) {},
    // 证件文件------------------------------------------------
    handleChangeBusinessZjwj(file, fileList) {
      this.fileListBusiness = fileList[0].raw;
      this.uploading(fileList, "证明文件");
    },
    // 删除证件文件缩略图
    handleRemove1(file) {
      this.$refs.pictureUpload1.handleRemove(file);
      this.delFile(file);
      this.fileListBusiness = [];
    },
    // 查看缩略图
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 认定证书------------------------------------------------
    handleChangeBusinessRdzs(file, fileList) {
      this.fileListBusiness1 = fileList[0].raw;
      this.uploading(fileList, "认定证书");
    },
    //自定义上传文件
    uploadFileBusiness(file) {
      return;
    },
    // 删除营业执照缩略图
    handleRemove2(file) {
      this.$refs.pictureUpload2.handleRemove(file);
      this.delFile(file);
      this.fileListBusiness1 = [];
    },
  },
};
</script>
<style lang="scss" scoped>
ul {
  list-style: none;
}
.license-right1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  div {
    p {
      font-size: 12px;
      line-height: 24px;
    }
  }
}
.box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 80px;
  background: #f5f7fa;
  .f1 {
    width: 100%;
    height: 138px;
    background: #f0f1f7;
    .f1_content {
      position: relative;
      margin: 0 auto;
      width: 1200px;
      height: 100%;
      .goHome {
        display: flex;
        align-items: center;
        height: 25px;
        cursor: pointer;
        z-index: 9999;
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 16px;
        font-weight: 500;
        color: #616060;
        img {
          width: 24px;
          // height: 24px;
        }
      }
      ul {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          h6 {
            font-size: 14px;
            font-weight: 400;
            color: #515151;
            margin-bottom: 5px;
            span {
              font-size: 22px;
              font-family: Britannic Bold;
              font-weight: 500;
              color: #000000;
            }
          }
          .quan {
            width: 24px;
            height: 24px;
          }
          .line {
            width: 123px;
            height: 3px;
          }
        }
      }
    }
  }
  .f2 {
    box-sizing: border-box;
    padding: 40px 80px;
    margin: 0 auto;
    width: 1200px;
    background-color: #fff;
    .content {
      box-sizing: border-box;
      padding: 30px 20px 50px 20px;
      margin: 0 auto;
      // width: 1250px;
      height: 100%;
      .f2_content {
        box-sizing: border-box;
        padding: 40px 0px;
      }
      .f2_contents {
        box-sizing: border-box;
        padding: 40px 0;
      }
      .aaa11 {
        display: block;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #333333;
        margin-bottom: 20px;
      }
      .hint {
        box-sizing: border-box;
        padding: 5px 10px;
        display: flex;
        align-items: center;
        background-color: #ededed;
        font-size: 12px;
        font-family: Source Han Sans SC;
        font-weight: 300;
        color: #909090;
        margin-left: 10px;
      }
      .title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        h6 {
          width: 5px;
          height: 18px;
          background-color: #0a7be0;
          margin-right: 10px;
        }
      }
      // 按钮
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        margin-top: 80px;
        // margin-bottom: 140px;
        .last {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          opacity: 0.3;
          border-radius: 4px;
        }
        .next {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          border-radius: 4px;
        }
        button {
          align-items: center;
          justify-content: center;
          display: flex;
          border-radius: 5px;
          width: 180px;
          height: 50px;
          color: #fff;
          margin-left: 30px;
          border: 0;
        }
      }
    }
    // 营业执照
    // 身份证正反面
    .license {
      display: flex;
      margin-bottom: 20px;
      margin-left: -28px;
      .aaa {
        width: 77px;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #999999;
      }
      .permit {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        width: 212px;
        height: 121px;
        background: url(@/assets/flow/组87.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 15px;
        overflow: hidden;
        cursor: pointer;
        img {
          width: 212px;
          height: 100%;
        }
      }
      .card {
        width: 216px;
        height: 123px;
        margin-right: 8px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .license-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        div {
          width: 100%;
          p {
            font-size: 14px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
          }
        }
      }
    }
    .license1 {
      .aaa11 {
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        width: 180px;
        text-align: right;

        padding: 0px 14px;
      }
    }
  }
}
// 操作按钮
.span {
  display: inline-block;
  font-size: 15px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  margin-right: 5px;
  color: #0a7be0;
  border-bottom: 1px solid #0a7be0;
  cursor: pointer;
  margin-right: 20px;
}
.span1 {
  margin-right: 0;
  color: #ff4040;
  border-bottom: 1px solid #ff4040;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}
::v-deep .el-upload-list--picture .el-upload-list__item-thumbnail {
  width: 140px;
}
::v-deep .el-upload-list--picture .el-upload-list__item-name {
  display: none;
}
::v-deep .upload-demo .el-upload-list {
  display: none;
}
::v-deep .el-upload-list--picture .el-upload-list__item {
  width: 180px;
  margin-right: 15px;
}
::v-deep .upload-demo {
  display: flex;
}
::v-deep .el-upload__tip {
  margin-left: 15px;
}
::v-deep .el-upload__tip {
  font-size: 12px;
}
</style>
<style lang="scss">
// 上传
.el-upload--picture-card {
  background-color: rgba(245, 245, 245, 0.1);
  border: 0;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 100%;
  height: 160px;
  display: flex;
  margin: 0;
  z-index: 888;
}
.el-dialog__header {
  border: 0px;
}
</style>
